<!-- author:王丹
     describe:用于学生请假页面
     update-time：2022-04-27 15：50 ； 2022-05-02 15：44；
 -->
<template>
  <div class="taskBody">
    <div class="topBox"></div> 
    <hr>

    <!-- 按钮，输入框 -->
    <div class="footer">
      <div class="addBtn">
        <el-button type="primary" color="#3E94AD" @click="addLeave()">+新增请假</el-button>
      </div>
       <div class="blockTask">
        <el-cascader :options="entryname" placeholder="主题" />
      </div>
      <div class="block">
        <el-date-picker
          v-model="value1"
          type="date"
          placeholder="申请提交时间"
          :default-value="new Date(2010, 9, 1)"
        />
      </div>
       <div class="blockTeacher">
        <el-cascader :options="options" placeholder="审批状态" />
      </div>
      <div class="blockWork">
        <el-cascader :options="Jobtype" placeholder="请假原因" />
      </div>
      <div class="selctBtn">
        <el-button type="primary" color="#3E94AD">查询</el-button>
      </div>
      <div class="startBtn"><el-button>重置</el-button></div>
    </div>

    <!-- 表格 -->
    <el-table
      :data="tableData"
      style="width: 100%; height: 330px"
      :row-class-name="tableRowClassName"
      :header-cell-style="{ background: '#c2dae2' }"
    >
      <el-table-column prop="date" label="申请提交时间" width="150" />
      <el-table-column prop="name" label="主题" width="150" />
      <el-table-column prop="topic" label="请假原因" width="150" />
      <el-table-column prop="type" label="原因说明" width="150" />
      <el-table-column prop="complete" label="请假时间" width="180" />
      <el-table-column prop="state" label="审批状态" width="100" />
      <el-table-column prop="operation" label="操作"
        ><el-button class="dati" >查看</el-button></el-table-column
      >
    </el-table>
    <!-- 分页标签 -->
    <div>
      <el-pagination class="dataFen" background layout="prev, pager, next" :total="1000" />
    </div>
  </div>
</template>

<script>
import { reactive } from "@vue/reactivity";
import { useRouter } from 'vue-router'
export default {
  name: "StudentLeave",
  // 表格单双数样式改变
  methods: {
    tableRowClassName({ rowIndex }) {
      if (rowIndex % 2 === 0) {
        return "defaul-row";
      } else {
        return "success-row";
      }
    },
  },
  setup() {
     const router =  useRouter()
    const state = reactive({
      value1: "",
      value2: "",
      classObject: {
        background: "red",
        color: "#C2DAE2",
      },
    });
    const entryname = [
      {
        value: "consistency",
        label: "请假",
      },
      {
        value: "feedback",
        label: "请假1",
      },
    ];
    const Jobtype = [
      {
        value: "consistency",
        label: "事假",
      },
      {
        value: "feedback",
        label: "病假",
      },
    ];
    const options = [
      {
        value: "consistency",
        label: "未批审",
      },
      {
        value: "feedback",
        label: "已批审",
      },
    ];
    const tableData = [
      {
        date: "2016-05-03 00:01",
        name: "请假",
        topic: "事假",
        type: "家中有事",
        complete: "2020-06-01 00:00",
        state: "待审核",
        scor: "",
        operation: "查看",
      },
      {
        date: "2016-05-03 00:01",
        name: "请假",
        topic: "事假",
        type: "家中有事",
        complete: "2020-06-01 00:00",
        state: "待审核",
        scor: "",
        operation: "查看",
      },
      {
        date: "2016-05-03 00:01",
        name: "请假",
        topic: "事假",
        type: "家中有事",
        complete: "2020-06-01 00:00",
        state: "待审核",
        scor: "",
        operation: "查看",
      },
      {
        date: "2016-05-03 00:01",
        name: "请假",
        topic: "事假",
        type: "家中有事",
        complete: "2020-06-01 00:00",
        state: "待审核",
        scor: "",
        operation: "查看",
      },
    ];

  //点击新增按钮跳转到 新增请假
  const addLeave = () => {
      router.push('/studentadd')
  }
  //查看详情跳转
  const searchDati = () => {
    router.push('/StudentDetails')
  }
    return {
      state,
      options,
      entryname,
      Jobtype,
      tableData,
      addLeave,searchDati,
    };
  },
};
</script>
<style scoped>
/* 表单 */
.success-row {
  background-color: #c2dae2 !important;
}
</style>
<style scoped>
/* 背景 */
 .topBox{
   width: 200px;
   height: 10px;
   background-color: #3e94ad;
   border-radius: 20px;
   float: left;
   left: 10px;
 }
 /* 头部 线条*/
.taskBody {
  width: 1000px;
  margin-top: 100px;
  margin-left: 150px;
}

.footer {
  display: flex;
  margin-top:30px;
  margin-bottom: 10px;
}
.footer > div {
  padding-left: 0px;
}
/* 时间输入框 */
.demo-date-picker .block {
  padding: 30px 0;
  text-align: center;
  border-right: solid 1px var(--el-border-color);
  flex: 1;
}
.demo-date-picker .block:last-child {
  border-right: none;
}
.el-date-editor .el-input,
.el-date-editor.el-input__inner {
  width: var(--el-date-editor-width);
}
.demo-date-picker .demonstration {
  display: block;
  color: var(--el-text-color-secondary);
  font-size: 14px;
  margin-bottom: 20px;
}
/* 头部输入框和按钮 */
.addBtn{
  position: absolute;
}
.block {
  margin-left: 30px;
}
.block2 {
  margin-left: 30px;
  margin-left: 100px;
}
.blockTask {
  margin-left: 145px;
  width: 165px;
}
.blockWork {
  margin-left: 30px;
  width: 165px;
}
.blockTeacher {
  margin-left:30px;
  width: 130px;
}
.selctBtn {
  margin-left: 20px;
}
.startBtn {
  margin-left: 20px;
}
.dati {
  width:50px;
  height: 25px;
  background: #077498;
  color: rgb(219, 238, 254);
}
.dataFen {
  margin-left: 350px;
  margin-top: 30px;
}
</style>
